<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>该死的会员购</title>
    <link rel="SHORTCUT ICON" href="../img/bilibili_logo.png" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1852977_6zj0lslniey.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/vipshop.css">
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>


    <template id="goods">
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="商品" name="first">
                    <div class="good">
                        <div class="content" v-for="(item, index) in good" :key="index">
                            <img :src="item.pic" alt="">
                            <span style="display: block; overflow-x: hidden;font-size: 14px;
                                font-weight: bold;margin-bottom:3px ;">{{item.name}}</span>
                            <span style="float: left; color: pink;">￥{{item.money}}</span>
                            <span style="float: right;">{{item.shazi}}个傻子想要</span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="抢先看" name="second">
                    <div class="prevlook">
                        <div class="content" v-for="(item, index) in prevlook" :key="index">
                            <img :src="item.pic" alt="" style="height: 100%;">
                            <span>{{item.name}}</span>
                            <span style="position: absolute; bottom: 10px;right: 15px;">{{item.zan}}人觉得很爽</span>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </template>

    <template id='vvvip'>
        <div>
            <el-container>
                <el-header>
                    <span>会员购</span>
                    <ul class="topbar iconfont">
                        <li v-for="item in topbar"><i :class="item.icon" style="margin-right: 10px;"></i></li>
                    </ul>
                </el-header>
                <el-main>
                    <el-input placeholder="什么都买不起"></el-input>
                    <div class="classify">
                        <a href="" v-for="item in classify">
                            <el-avatar :src="item.icon" style="margin-bottom: 4px;"></el-avatar><br>
                            <span style="font-size: 12px; color: rgba(0, 0, 0, 0.6);">{{item.txt}}</span>
                        </a>
                    </div>
                    <div class="rotating-ad">
                        <!-- <span class="demonstration">Click 指示器触发</span> -->
                        <el-carousel trigger="click">
                            <el-carousel-item v-for="item in ads">
                                <img :src="item.src" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <goods-list></goods-list>
                </el-main>
                <el-footer class="bottom-nav">
                    <ul>
                        <li class="iconfont" v-for='item in bottombar'>
                            <div v-if="item.name=='首页'">
                                <a href="../main_page.html">
                                    <i style="font-size: 16px;" :class="item.icon"></i></br>
                                    <span style="font-size: 14px;">{{item.name}}</span>
                                </a>

                            </div>
                            <div v-else>
                                <i style="font-size: 16px;" :class="item.icon"></i></br>
                                <span style="font-size: 14px;">{{item.name}}</span>
                            </div>

                        </li>
                    </ul>
                </el-footer>
            </el-container>
        </div>
    </template>
    <div id="vipshop">
        <vip-shop></vip-shop>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/vipshop.js"></script>

</html>